<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>

    <!-- vue -->
    <script src="./assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="./assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="./assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="./assets/jquery-3.6.1.min.js"></script>
    <!--公共方法-->
    <script type="text/javascript" src="./utils/common.js"></script>
    <!--请求封装-->
    <script type="text/javascript" src="utils/myAjax.js"></script>


    <style>

    </style>

</head>
<body>

<div id="app">
    <el-container style="min-height: 960px">
        <el-header style="display: flex;
                    justify-content: end;
                    align-items: center;
                    height: 35px">

            <div class="user-info">
                <el-dropdown @command="handleCommand">
                    <span>当前登录用户 : {{user.name}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                >
                    <el-menu-item index="1" @click="openMenu('/views/user.html')">
                        <i class="el-icon-menu"></i>
                        <span slot="title" >用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="openMenu('/book.html')">
                        <i class="el-icon-menu"></i>
                        <span slot="title" >图书管理</span>
                    </el-menu-item>
                    <el-menu-item index="3"  @click="openMenu('/circle.html')">
                        <i class="el-icon-setting"></i>
                        <span slot="title">转圈圈</span>
                    </el-menu-item>
                    <el-menu-item index="4"  @click="openMenu('/box.html')">
                        <i class="el-icon-setting"></i>
                        <span slot="title">柱形</span>
                    </el-menu-item>
                    <el-menu-item index="5"  @click="openMenu('/input.html')">
                        <i class="el-icon-setting"></i>
                        <span slot="title">选文字</span>
                    </el-menu-item>
                    <el-menu-item index="6"  @click="openMenu('/click.html')">
                        <i class="el-icon-setting"></i>
                        <span slot="title">点格子</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>



            <iframe name="layoutFrame" id="layoutFrame" :src="frameUrl" style="margin:0 auto;width:100%;min-height: 600px;border: none;margin-top:5px;overflow-y: scroll"></iframe>
        </el-container>
    </el-container>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                frameUrl:'/views/user.html',
                userId:undefined,
                user:{
                    name:undefined,
                }
            }
        },
        created(){
            this.userId = getCookie("token").split("#")[1];
            this.getUser();
        },
        methods:{
            getUser(){
                let that = this;
                sendAjaxNoToken("/user/getInfo","POST",{id:that.userId}).then((res)=>{
                    if(!(res.data && res.data.hasOwnProperty("name"))){
                        this.$confirm('登录信息异常，请重新登录?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            clearCookie("token");
                            window.location = 'login.html'
                        }).catch(() => {

                        });
                    }
                    this.user = res.data;
                })
            },
            handleCommand(command) {
                if( command = 'logOut'){
                    this.logOut();
                }
            },
            logOut(){
                clearCookie("token");
                window.location = 'login.html'
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            openMenu(url){
                this.frameUrl = url;
            },

        }
    })

</script>

</body>
</html>